<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏州数字文旅APP - 高保真原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946', // 苏州园林红
                        secondary: '#457B9D', // 湖水蓝
                        accent: '#F1C40F', // 点缀金
                        dark: '#1D3557', // 深色
                        light: '#F1FAEE', // 浅色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .phone-frame {
                width: 393px; /* iPhone 15 Pro宽度 */
                height: 852px; /* iPhone 15 Pro高度 */
                border-radius: 48px;
                border: 12px solid #000;
                position: relative;
                overflow: hidden;
                box-shadow: 0 0 20px rgba(0,0,0,0.3);
            }
            .iframe-content {
                width: 100%;
                height: 100%;
                border: none;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4 md:p-8">
    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-8 text-center">苏州数字文旅APP - 高保真原型</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 首页 -->
        <div class="phone-frame">
            <iframe src="home.html" class="iframe-content"></iframe>
        </div>

        <!-- 旅游规划助手 -->
        <div class="phone-frame">
            <iframe src="planner.html" class="iframe-content"></iframe>
        </div>

        <!-- 园林打卡手帐 -->
        <div class="phone-frame">
            <iframe src="checkin.html" class="iframe-content"></iframe>
        </div>

        <!-- 行程详情 -->
        <div class="phone-frame">
            <iframe src="itinerary.html" class="iframe-content"></iframe>
        </div>

        <!-- 酒店推荐 -->
        <div class="phone-frame">
            <iframe src="hotels.html" class="iframe-content"></iframe>
        </div>

        <!-- 个人中心 -->
        <div class="phone-frame">
            <iframe src="profile.html" class="iframe-content"></iframe>
        </div>
    </div>

    <script>
        // 为所有iframe添加加载完成事件
        document.querySelectorAll('iframe').forEach(iframe => {
            iframe.addEventListener('load', function() {
                // 可以在这里添加iframe加载完成后的处理
            });
        });
    </script>
</body>
</html>